<template>
	<view class="">
		<view class="list">
			<text class="item  " :class="{'act':time==1}" @click="reKline(1)">1分钟</text>
			<text class="item" :class="{'act':time==2}" @click="reKline(2)">1天</text>
		</view>
		<section class="chart-section">
			<qiun-data-charts type="candle" v-if="klineOpts" :opts="klineOpts" :chartData="chartData"
				:disableScroll="true" :ontouch="true" :onzoom="true"
				style="width: 700upx; height: 400upx;margin: 0 auto;" />
		</section>
	</view>
</template>

<script>
	import {
		kline,
	} from '@/http/api.js';
	export default {
		props: {
			id: {
				type: String,
				default: 0
			}
		},
		data() {
			return {
				time: 1,
				timeframe: "minute",
				// Chart Data - Placeholder for now
				chartData: {
					categories: [],
					series: [{
						data: []
					}]
				},
				klineOpts: null,

			};
		},
		methods: {
			reKline(num) {
				this.time = num
				if (num == 1) {
					this.timeframe = "minute"
				} else {
					this.timeframe = "day"
				}
				this.getServerData()
			},
			getServerData() {
				// https://wallet.jppocket.com/api/kline?id=1&timeframe=minute&aggregate=5
				var param = {
					id: this.id,
					timeframe: this.timeframe,
					aggregate: "1",
				}
				kline(param).then((res) => {
					if (res.code == 200) {
						let chartData = {
							categories: res.data.time,
							series: [{
								data: res.data.data
							}]
						}
						let data1Mu = [];
						let data1Day = [];
						chartData.categories.forEach((time, index) => {
							let date = time.split(' ')[0]; // YYYY-MM-DD
							let timePart = time.split(' ')[1]; // YYYY-MM-DD
							let hhmm = timePart.split(':').slice(0, 2).join(':');
							data1Mu.push(hhmm);
							data1Day.push(date);
						});
						let minXCount = 20;
						let categories = chartData.categories.slice();
						console.log(chartData.series[0].data);
						let data = chartData.series[0].data.slice();
						if (categories.length < minXCount) {
							for (let i = categories.length; i < minXCount; i++) {
								categories.push(''); // 空刻度
								data.push([0, 0, 0, 0]); // 空数据
							}
						}
						this.klineOpts = {
							rotate: false,
							rotateLock: false,
							color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272",
								"#FC8452", "#9A60B4",
								"#ea7ccc"
							],
							padding: [15, 0, 10, 0],
							dataLabel: true,
							enableScroll: true,
							enableMarkLine: true,
							legend: {
								show: false, // ✅ 关键：彻底隐藏图例
							},
							xAxis: {
								fontSize: 6,
								labelCount: this.time == 1 ? 10 : 6,
								itemCount: 40,
								disableGrid: true,
								gridColor: "#CCCCCC",
								gridType: "solid",
								dashLength: 1,
								scrollShow: true,
								scrollAlign: "right",
								scrollColor: "#A6A6A6",
								scrollBackgroundColor: "#EFEBEF"
							},
							yAxis: {
								data: [{
									fontSize: 6, // 你想要的字体大小
									fontColor: '#666666',
									position: 'right',
								}],
							},
							extra: {
								candle: {
									color: {
										upLine: "#f04864",
										upFill: "#f04864",
										downLine: "#2fc25b",
										downFill: "#2fc25b"
									},
									// 在这里配置移动平均线
									average: {
										show: true, // 显示移动平均线
										name: ["MA5", "MA10", "MA20", "MA30"], // 线名称
										day: [5, 10, 20, 30], // 计算周期
										color: ["#1890ff", "#2fc25b", "#facc14", "#ff6b81"], // 线颜色
										width: [1, 1, 1, 1] // 线粗细（可选）
									}
								},
								markLine: {
									type: "dash",
									dashLength: 5,
									data: []
								},

							},


						}
						if (this.time == 1) {
							chartData.categories = data1Mu
						} else {
							chartData.categories = data1Day
						}
						this.chartData = JSON.parse(JSON.stringify(chartData));
					}
				}).catch(err => {

				}).finally(() => {
					// this.hideLoading()
				})
			},
		},
		mounted() {
			this.getServerData();
		},
	};
</script>

<style lang="scss" scoped>
	.chart-section {
		width: 100%;
		height: 100%;
	}

	.webView {
		width: 100%;
		height: 100%;
	}

	.list {
		display: flex;
		padding: 20upx 15upx 0;
		gap: 30upx;

		.item {
			font-size: 16upx;
			color: #767676;
		}

		.act {
			color: #2C2C2C;
		}

	}
</style>